// 导入 Element Plus 中英文语言包
import zhCn from "element-plus/es/locale/lang/zh-cn";
import en from "element-plus/es/locale/lang/en";

export const useAppStore = defineStore("app", () => {
	const sidebarStatus = useStorage("sidebarStatus", 0);
	const sidebar = reactive({
		opened: sidebarStatus.value === 0 ? false : true,
		withoutAnimation: false
	});

	const device = useStorage<SettingType["device"]>("device", "desktop");
	const size = useStorage<SettingType["size"]>("size", "default");
	const language = useStorage<SettingType["language"]>("language", "zh-cn");

	/**
	 * 根据语言标识读取对应的语言包
	 */
	const locale = computed(() => {
		if (language?.value == "en") {
			return en;
		} else {
			return zhCn;
		}
	});
	/**
	 * @description:切换slidebar显示/隐藏
	 */
	const toggleSideBar = () => {
		sidebar.opened = !sidebar.opened;
		sidebar.withoutAnimation = false;
		if (sidebar.opened) {
			sidebarStatus.value = 1;
		} else {
			sidebarStatus.value = 0;
		}
	};
	/**
	 * @description: 打开slidebar
	 * @param {boolean} withoutAnimation
	 */
	const openSideBar = (withoutAnimation: boolean) => {
		sidebarStatus.value = 1;
		sidebar.opened = true;
		sidebar.withoutAnimation = withoutAnimation;
	};
	/**
	 * @description: 关闭slidebar
	 * @param {boolean} withoutAnimation
	 */
	const closeSideBar = (withoutAnimation: boolean) => {
		sidebarStatus.value = 0;
		sidebar.opened = false;
		sidebar.withoutAnimation = withoutAnimation;
	};
	/**
	 * @description: 切换设备
	 * @template {SettingType["device"]} T
	 * @param {T} deviceType
	 */
	const toggleDevice = (deviceType: SettingType["device"]) => {
		device.value = deviceType;
	};
	/**
	 * @description: 设置size
	 * @template {SettingType["size"]} T
	 * @param {T} sizeTpye
	 */
	const setSize = (sizeTpye: SettingType["size"]) => {
		size.value = sizeTpye;
	};

	/**
	 * @description: 切换语言
	 * @template {SettingType["language"]} T
	 * @param {T} val
	 */
	const changeLanguage = (val: SettingType["language"]) => {
		language.value = val;
	};
	return {
		sidebarStatus,
		sidebar,
		device,
		size,
		language,
		locale,
		toggleSideBar,
		closeSideBar,
		openSideBar,
		toggleDevice,
		setSize,
		changeLanguage
	};
});
